<template name="search">
	<!-- 搜索功能 -->
	<view class="head">
		<view class="headwrap">
			<image class="searchimg" src="https://img.yohaoyun.com/yohaoyun/tongcheng/search.png"></image>
			<input type="text" class="searchtext" confirm-type="search" 
			@confirm="searchcontent" v-model="searchtext"
			placeholder="输入作者或者书名进行搜索"  maxlength="20" placeholder-class="textstyle"/>
		</view>
		<!-- <view class="dateBox">
			<uni-icons type="" class="icon"></uni-icons>
		</view> -->
	</view>
</template>

<script>
	export default {
		name:"search",
		data() {
			return {
				searchtext:''
			};
		},methods: {
			searchcontent() {
				var me = this;
				me.$emit('search',me.searchtext);
			}
		}
	}
</script>

<style scoped lang="scss">
.head{
	width: 100%;
	box-sizing: border-box;
	padding: 12rpx 24rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #fff;
	.headwrap{
		flex: 1;
		height: 64rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		background-color: #F5F5F5;
		padding: 0 16rpx;
		border-radius: 8rpx;
		align-items: center;
		.searchimg{
			width: 44rpx;
			height: 44rpx;
			margin-right: 10rpx;
		}
		.textstyle{
			font-size: 24rpx;
		}
		.searchtext{
			width: 100%;
			height: 32rpx;
			line-height: 32rpx;
			color: #666;
		}
	}
	.dateBox{
		width: 64rpx;
		margin-left: 24rpx;
		.icon{
			display: block;
			width: 64rpx;
			height: 64rpx;
			background: url('../../static/img/icon/date.png') no-repeat;
			background-size: 100% 100%;
		}
	}
}
</style>
